<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>顶部导航条</title>
    <style type="text/css">
        #top1 ul{/*设置导航栏的框框*/
            /*margin: 10px auto;!*框框整体的位置，30px是指离网页的顶部和下部的距离，auto控制的是左右距离为自动调节*!*/
            width: 100%;/*框框的宽度*/
            height: 30px;/*框框的长度*/
            padding: 0px;/*将框框的padding设置为零，不然会导致框框里的内容与框边缘有间隔*/
            /*border:1px solid #000;!*添加边框*!*/
        }
        #top1 li{
            list-style-type: none;/* 去掉li前的点 */
            float: left;/*将li设置成做浮动，变为联动*/
        }
        #top1 a{
            display: block;/*将a变成块状*/
            width: 100px;/*设置块的宽度*/
            height: 30px;/*设置块的长度*/
            font-family: Microsoft Yahei;
            line-height: 30px;/*设置字体在块中的高度*/
            /*background-color: #B2B2B2;*/
            margin: 0px 0px;/*块里的高宽通过margin设置*/
            color: black;
            text-align: center;/*字体居中*/
            text-decoration: none;/*去掉下划线*/
            font-size: 14px;
        }
        #top1 a:hover{
            background-color: #f5f5f5;
        }

    </style>
</head>
<body>
<div id="top1" style="width:100%;height:30px;margin-bottom: 0px;background-color:#EEEEEE">

    <div style="float: left;padding-left: 20px;">
        <ul class=daohang style="padding-left: 165px">
            <li><a href="#" >服务网点</a></li>
            <li><a href="#" >在线客服</a></li>
            <li><a href="#" >口袋银行</a></li>
            <li><a href="../problem/problem.html" ><strong>问题小助手</strong></a></li>
        </ul>
    </div>

    <div style="float: right;">
        <ul class=daohang>
            <li><a href="">首页</a></li>
            <li><a href="">人才招聘</a></li>
            <li><a href="">安全提醒</a></li>
            <li><a ><span class=""></span>理财</a></li>
            <li><a ><span class=""></span>基金</a></li>
        </ul>
    </div>

</div>


</table>
</body>
</html>